﻿﻿<template>
  <div class="box" >
    <div class="container">
      <ul>
        <li v-for="(data, index) in list.classPartVos" :key="index">
          <div class="left">
            <img src="img/biaozhi.png" alt="" />
            <div class="line"></div>
          </div>

          <div class="right">
            <div class="time">{{ data.startTime }}-{{ data.endTime }}</div>

            <div class="message">
              <div class="top">{{ data.partName }}</div>

              <div class="middle">
                <div
                  class="title"
                  v-if="data.textName != null"
                  @click="watchWord(data.textFile)"
                >
                  <img src="img/wendang.png" alt="" /><span
                    >点击查看文字教案</span
                  >
                </div>

                <div class="video">
                  <img
                    src="img/shipinkaobei.png"
                    v-for="(item, value) in data.materialVos"
                    :key="value"
                    @click="videoPush(item.videoFile, data.partId,data)"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>

      <!-- 优秀备课视频 -->

      <div class="goodVideo">
        <div class="video-top">
          <div class="left">
            <img src="img/ganggang@2x.png" alt="" /><span>优秀备课视频</span>
          </div>

          <!-- <div @click="pushMore(list.beiKeFileVos[0].beikeFile)" class="right">
            <span>更多视频</span>
            <van-icon name="arrow" />
          </div> -->
        </div>

        <div v-if="list.beiKeFileVos.length" class="video-box">
          <img v-for="(data,index) in list.beiKeFileVos" :key="index" @click="pushExtraVideo(data.beikeFile,index)" src="img/shipinkaobei.png" alt="" />
        </div>
        <div v-else class="emply">
          <img src="img/qq@2x.png" alt="">
          <span>暂无视频</span>
        </div>
      </div>

      <!-- 评论 -->

      <div class="comment">
        <div class="video-top">
          <div class="left">
            <img src="img/ganggang@2x.png" alt="" /><span>评论</span
            ><span class="num">({{comments.length}})</span>
          </div>
        </div>
      <div v-if="comments.length">
        
        <div v-for="(data,index) in comments" :key="index">
        <div class="com_box">
          <div class="left"><img :src="data.userHead" alt="" /></div>
          <div class="right" @click="conmentTo(data.fromUsername,data.fromUid,data.id)"><p><span>{{data.fromUsername}}：</span>{{data.commentContent}}</p></div>
        </div>
        <div class="second" v-if="data.children.length">
          <div class="second_item" v-for="value in data.children" :key="value.id" @click="conmentTo(value.fromUsername,value.fromUid,data.id)">
             <span>{{value.fromUsername}} </span>回复<span> {{value.toUsername}}</span> ：{{value.commentContent}}
          </div>
        </div>
        </div>
       
      </div>
         <div v-else style="flex-direction: column" class="emply">
         <img src="img/ww@2x.png" alt="">
          <span style="margin-top:0.2rem">暂无评论,占个沙发吧</span>
      </div>
      </div>
     
      <!-- 悬浮框 -->

      <div @click="show = true" class="float">
        <img src="img/xuanfuqiu.png" alt="" />
      </div>

      <van-popup round position="bottom" v-model="show">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="show = false"
          @confirm="onConfirm"
        />
      </van-popup>

      <!-- 顶部齿轮 -->

      <!-- <div class="chilun">

            <div class="img"><img src="img/chilinzi.png" alt=""><span>00</span></div>: 

            <div class="img"><img src="img/chilinzi.png" alt=""><span>00</span></div>: 

            <div class="img"><img src="img/chilinzi.png" alt=""><span>00</span></div>

        </div> -->
    </div>

    <footer @click.stop>
      <input type="text" v-model="comment" ref="input" @focus="onFocus" :placeholder="answer?`回复${answerName}：`:'写评论'" /><img
        src="img/xiaoxi12x.png"
        alt=""
        @click="sendComment"
      />
    </footer>

      <van-overlay :show="videoShow"  @click="videoShow = false">
        <div class="wrapper" @click="videoShow = false">
          <div class="videos" @click.stop>
            <video-player
              class="video-player vjs-custom-skin"
              ref="videoPlayer"
              :playsinline="true"
              :options="playerOptions"
            >
            </video-player>
          </div>
        </div>
      </van-overlay>
    <div class="mask" v-if="maskShow" @click="cancelAll"></div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";

export default {
  data() {
    return {
      show: false,

      columns: ["视频", "文档", "图片"],
      userName:'',
      id: "",
      pid:'',
      comment:'',
      comments:[],
      list: [],
      redayVideo:[],
      imageBox: [],
      answer:false,
      answerName:'',
      answerId:'',
      maskShow:false,
      videoShow: false,

      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度

        autoplay: false, //如果true,浏览器准备好时开始回放。

        muted: false, // 默认情况下将会消除任何音频。

        loop: false, // 导致视频一结束就重新开始。

        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）

        language: "zh-CN",

        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）

        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。

        sources: [
          {
            type: "", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目

            src: "", //url地址
          },
        ],

        poster: "img/bofangshipin.png", //你的封面地址

        width: document.documentElement.clientWidth, //播放器宽度

        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。

        controlBar: {
          timeDivider: true,

          durationDisplay: true,

          remainingTimeDisplay: false,

          fullscreenToggle: true, //全屏按钮
        },
      },
      courseName: ""
    };
  },

  mounted() {
    this.id = this.$route.query.id;
    this.courseName = this.$route.query.courseName;
    (async () => {
      const data = await this.get("/course/showClasspartAndClassMenu", {
        classPartId: this.id,
      });
      const name = await this.get('/user/userInfoShow',{userId:localStorage.getItem('id')});
      this.userName = name.data.userName;
      const comment = await this.get('/course/queryIcrobotCommentReplyClass',{classId:this.id});
      // this.comments = comment.data;
      let firstComments = comment.data.filter(item=>item.toUsername == '');
      let secondComments = comment.data.filter(item=>item.toUsername);
      console.log(firstComments,secondComments);
      firstComments = firstComments.map(item=>{
        return {
          ...item,
          children:secondComments.filter(items=>items.parentId == item.id)
        }
      });
      this.comments = firstComments;
      console.log(this.comments);
      this.list = data.data;
      if (this.list.classMenus.some((item) => item.classmenuType == "图片")) {
        let arr = this.list.classMenus.filter(
          (item) => item.classmenuType == "图片"
        )[0].menuFiles;

        this.imageBox = arr.map((item) => item.fileName);
      }

      this.columns = this.list.classMenus.map((item) => {
        return {
          ...item,
          text: item.classmenuName,
        };
      });

      // this.imageBox
    })();
  },

  methods: {
    cancelAll(){
      this.$refs.input.blur();
      this.answer = false;
      this.answerId = '';
       this.answerName = '';
       this.maskShow = false;
       this.pid = '';
       this.comment = '';
    },
    onFocus(){
      this.maskShow = true;
    },
    pushComment(){
      (async ()=>{
        const comment = await this.get('/course/queryIcrobotCommentReplyClass',{classId:this.id});
        // this.comments = comment.data;
        let firstComments = comment.data.filter(item=>item.toUsername == '');
        let secondComments = comment.data.filter(item=>item.toUsername);
        console.log(firstComments,secondComments);
        firstComments = firstComments.map(item=>{
          return {
            ...item,
            children:secondComments.filter(items=>items.parentId == item.id)
          }
        });
        this.comments = firstComments;
        console.log(this.comments);
      })()
    },
    conmentTo(person,id,pid){
      this.answer = true;
      this.answerId = id;
      this.pid = pid;
      this.answerName = person;
      this.$refs.input.focus();
    },
    // onBlur(){
    //   this.answer = false;
    //   this.answerId = '';
    //    this.answerName = '';
    // },
    onConfirm(index, value) {
      this.show = false;

      // console.log(index,value);

      // return;

      if (index.classmenuType == "文档") {
        this.watchWord(index.menuFiles[0].fileName);
      } else if (index.classmenuType == "图片") {
        ImagePreview(this.imageBox);
      } else if (index.classmenuType == "压缩包") {
        window.location.href = index.menuFiles[0].fileName;
      } else if (index.classmenuType == "视频") {
        this.videoShow = true;

        this.playerOptions.sources[0].src = index.menuFiles[0].fileName;
      }
    },

    watchWord(url) {
      this.$router.push({
        path: "/pdf",

        query: {
          url,
          id:this.id
        },
      });
    },
    pushMore(url){
      this.$router.push({
        path: "/extravideo",
        query:{
           url,
          id:this.id
        }
       
      });
    },
    videoPush(url, id,data) {
      console.log(data);
      this.$router.push({
        path: "/video",

        query: {
          url,
          id,
          lessonId:this.id,
          name:data.partName
        },
      });
    },

    pushExtraVideo(url,index) {
      this.$router.push({
        path: "/extravideo",
        query:{
           url,
          id:this.id,
          courseName:this.courseName,
          index: index+1
        }
       
      });
    },
    sendComment(){
      if(!this.comment){
        this.Toast('评论不能为空！');
        return
      }
      let obj = {
        classId:this.id,
        taskType:'课次',
        commentContent:this.comment,
        fromUid:localStorage.getItem('id'),
        toUid:this.answerId,
        fromUsername:this.userName,
        toUsername:this.answerName,
        id:this.pid
      };
      (async ()=>{
        let data = await this.get('/course/addIcrobotCommentReplyClass',obj)
        if(data.code == 200){
          this.Toast(data.msg);
          this.cancelAll();
          this.pushComment();
        }
      })()
    }
  },
};
</script>

<style lang="scss" scoped>
.mask{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  bottom: 1rem;
  // background:pink
}
.second{
  width: 100%;
  // height: 0.4rem;
  background: #eee;
  font-size: 0.26rem;
  padding: 0 0.1rem 0.1rem;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 0.1rem;
  .second_item{
    margin-top: 0.1rem;
  }
  span{
    color: #2d9dff;
  }
}
.emply{
  display: flex;
  padding: 0.2rem;
  justify-content: center;
  align-items: center;
  img{
    width: 1.16rem;
    height: 1.19rem;
    vertical-align: middle;

  }
  span{ 
    font-size: 0.28rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #C7C7C7;
    margin-left: 0.2rem;
  }
}
.wrapper {
  display: flex;

  align-items: center;

  justify-content: center;
  

  height: 100%;

  // width: 2rem;

  // background: white;
}

.videos {
  width: 100%;

  height: 4rem;
}

input {
  -webkit-appearance: none;
}

.box {
  background: #f7f9fa;

  height: 100%;

  display: flex;

  flex-direction: column;

  .container {
    flex: 1;

    overflow: scroll;
  }
}

footer {
  width: 100%;

  padding: 0.17rem 0.24rem;

  box-sizing: border-box;

  align-items: center;

  display: flex;

  border-top: 0.01rem solid #eee;

  background: white;

  // height: 0.9rem;

  input {
    width: 6.36rem;

    // height: 56px;

    background: #ffffff;

    border: 0.01rem solid #afafaf;

    border-radius: 0.08rem;

    padding: 0.15rem;

    box-sizing: border-box;

    font-size: 0.26rem;
  }

  img {
    width: 0.4rem;

    height: 0.36rem;

    margin-left: 0.25rem;
  }
}

.float {
  width: 0.8rem;

  height: 0.8rem;

  position: fixed;

  right: 0.5rem;

  bottom: 1rem;

  img {
    width: 100%;

    height: 100%;
  }
}

.chilun {
  position: fixed;

  top: 0.2rem;

  right: 0.24rem;

  display: flex;

  align-items: center;

  font-size: 0.16rem;

  .img {
    position: relative;
  }

  img {
    width: 0.54rem;

    height: 0.54rem;
  }

  span {
    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);
  }
}

ul {
  padding: 0.2rem;

  box-sizing: border-box;

  li {
    display: flex;

    margin-top: 0.2rem;

    .left {
      display: flex;

      flex-direction: column;

      align-items: center;

      img {
        width: 0.26rem;

        height: 0.26rem;
      }

      .line {
        width: 0.01rem;

        background: #cfcfcf;

        height: 100%;

        margin-top: 0.05rem;
      }
    }

    .right {
      margin-left: 0.1rem;

      width: 100%;

      .time {
        font-size: 0.28rem;

        font-family: PingFang SC;

        font-weight: 500;

        color: #343434;
      }

      .message {
        margin-top: 0.2rem;

        background: white;

        padding: 0.2rem;

        box-sizing: border-box;

        width: 100%;

        .top {
          font-size: 0.3rem;

          font-family: PingFang SC;

          font-weight: 500;

          color: #343434;

          padding-bottom: 0.2rem;

          box-sizing: border-box;

          border-bottom: 0.01rem solid #f2f2f2;
        }

        .middle {
          margin-top: 0.2rem;

          .title {
            display: flex;

            align-items: center;

            img {
              width: 0.26rem;

              height: 0.26rem;
            }

            span {
              margin-left: 0.08rem;

              font-size: 0.26rem;

              font-family: PingFang SC;

              font-weight: 400;

              color: #2e9eff;
            }
          }

          .video {
            margin-top: 0.2rem;

            display: flex;

            img {
              width: 1rem;

              height: 1rem;

              margin-right: 0.16rem;
            }
          }
        }
      }
    }
  }
}

.goodVideo {
  padding: 0.25rem;

  box-sizing: border-box;

  background: white;

  .video-box {
    display: flex;

    align-items: center;

    margin-left: 0.24rem;

    margin-top: 0.3rem;

    img {
      width: 1.1rem;

      height: 1.1rem;
      margin-right: 0.2rem;
    }
  }
}

.video-top {
  display: flex;

  width: 100%;

  justify-content: space-between;

  align-items: center;

  padding-bottom: 0.25rem;

  border-bottom: 0.01rem solid #eeeeee;

  .left {
    display: flex;

    align-items: center;

    img {
      width: 0.03rem;

      height: 0.3rem;
    }

    span {
      font-size: 0.3rem;

      font-family: PingFang SC;

      font-weight: 500;

      color: #333333;

      margin-left: 0.1rem;
    }
  }

  .right {
    font-size: 0.24rem;

    font-family: PingFang SC;

    font-weight: 400;

    color: #7e7e7e;

    align-items: center;

    span {
      margin-right: 0.1rem;
    }
  }
}

.comment {
  padding: 0.25rem;

  box-sizing: border-box;

  background: white;

  margin-top: 0.2rem;

  // min-height: 6rem;

  .num {
    margin-left: 0.1rem;
  }
}

.com_box {
  margin-top: 0.2rem;
  position: relative;
  display: flex;
  .left {
    width: 0.7rem;

    height: 0.7rem;

    img {
      width: 0.7rem;

      height: 0.7rem;
      border-radius: 50%;
      vertical-align: top;
    }
  }

  .right {
    margin-left: 0.2rem;

    margin-top: 0.2rem;

    p {
      font-size: 0.26rem;

      font-family: PingFang SC;

      font-weight: 400;

      color: #333333;

      span {
        color: #2d9dff;
      }
    }
  }
}
</style>